<!DOCTYPE html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Floating label Demo</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style type="text/css">
        /* CSS styles */
        /* Example by Rafael González at https://codepen.io/rgg/pen/WrKyzj */
        @import url(http://fonts.googleapis.com/css?family=Open+Sans:700,300);
        @import url(http://weloveiconfonts.com/api/?family=fontawesome);
        html, body, div, span, applet, object, iframe,
        h1, h2, h3, h4, h5, h6, p, blockquote, pre,
        a, abbr, acronym, address, big, cite, code,
        del, dfn, em, img, ins, kbd, q, s, samp,
        small, strike, strong, sub, sup, tt, var,
        b, u, i, center,
        dl, dt, dd, ol, ul, li,
        fieldset, form, label, legend,
        table, caption, tbody, tfoot, thead, tr, th, td,
        article, aside, canvas, details, embed,
        figure, figcaption, footer, header, hgroup,
        menu, nav, output, ruby, section, summary,
        time, mark, audio, video {
            margin: 0;
            padding: 0;
            border: 0;
            font: inherit;
            font-size: 100%;
            vertical-align: baseline;
        }

        html {
            line-height: 1;
        }

        ol, ul {
            list-style: none;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
        }

        caption, th, td {
            text-align: left;
            font-weight: normal;
            vertical-align: middle;
        }

        q, blockquote {
            quotes: none;
        }
        q:before, q:after, blockquote:before, blockquote:after {
            content: "";
            content: none;
        }

        a img {
            border: none;
        }

        article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
            display: block;
        }

        /* fontawesome */
        [class*="fa-"]:before {
            font-family: 'FontAwesome', sans-serif;
        }

        body {
            font-family: 'Open Sans', sans-serif;
            font-size: 16px;
            font-weight: 300;
            line-height: 1em;
            text-align: center;
            color: #444444;
            background-color: #d0d0d0;
        }

        h1 {
            font-size: 2.5em;
            margin: 2em 0 1em;
        }

        h2 {
            margin-bottom: 3em;
        }

        em,
        strong {
            font-weight: 700;
        }

        input {
            display: none;
        }

        header p {
            margin-bottom: 2em;
        }

        section {
            margin-bottom: 2em;
            padding: 0;
        }
        section:last-of-type {
            margin-bottom: 0;
        }

        p {
            line-height: 1.5em;
        }

        .container {
            z-index: 1;
            margin-bottom: 4em;
        }

        .pure-tree {
            text-align: left;
            display: block;
        }
        .pure-tree.main-tree {
            width: 30em;
            display: inline-block;
        }
        .pure-tree:not(.main-tree) {
            padding-left: 1.2em;
        }
        .pure-tree:not(.main-tree) li {
            overflow: hidden;
            height: 0;
            display: block;
        }
        .pure-tree label {
            display: block;
            cursor: pointer;
            color: #717780;
            border-bottom: 1px dashed #B0B9C5;
            padding: 1.125em 1.125em 1.125em 0;
        }
        .pure-tree label:before {
            width: 1em;
            height: 1em;
            line-height: 1em;
            display: inline-block;
            font-family: 'FontAwesome', sans-serif;
            content: "\f114";
            padding-right: .75em;
        }
        .pure-tree label:hover {
            color: #434a58;
            border-bottom-color: #434a58;
        }
        .pure-tree .pure-tree_link a {
            padding: 1.500em 1.125em 0.750em 0;
            display: block;
            border-radius: .2em;
            color: #717780;
            text-decoration: none;
        }
        .pure-tree .pure-tree_link a:hover {
            color: #434a58;
        }
        .pure-tree.nested {
            padding-left: 1.7em;
        }
        .pure-tree [type="checkbox"] {
            display: none;
        }
        .pure-tree [type="checkbox"]:checked + label {
            color: #434a58;
            border-bottom-color: #434a58;
        }
        .pure-tree [type="checkbox"]:checked ~ ul > li {
            height: auto;
        }
        </style>

    </head>
    <body>
        <!--[if lt IE 8]>
        <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <header>
            <h1>Pure <strong>CSS</strong> Tree</h1>
            <p>...a folders tree view, without JS :P</p>
        </header>
        <ul id="compositions-list" class="pure-tree main-tree">
            <li>
                <input type="checkbox" id="trigger-views" checked="checked">
                <label for="trigger-views">views</label>
                <ul class="pure-tree">
                    <li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
                    <li>
                        <input type="checkbox" id="trigger-layout">
                        <label for="trigger-layout">layout</label>
                        <ul class="pure-tree">
                            <li>
                                <input type="checkbox" id="trigger-base">
                                <label for="trigger-base">base</label>
                                <ul class="pure-tree">
                                    <li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
                                </ul>
                            </li>
                            <li>
                                <input type="checkbox" id="trigger-footer">
                                <label for="trigger-footer">footer</label>
                                <ul class="pure-tree">
                                    <li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <input type="checkbox" id="trigger-partials">
                        <label for="trigger-partials">partials</label>
                        <ul class="pure-tree">
                            <li>
                                <input type="checkbox" id="trigger-header">
                                <label for="trigger-header">header</label>
                                <ul class="pure-tree">
                                    <li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
                                </ul>
                            </li>
                            <li>
                                <input type="checkbox" id="trigger-list">
                                <label for="trigger-list">list</label>
                                <ul class="pure-tree">
                                    <li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
                                </ul>
                            </li>
                            <li>
                                <input type="checkbox" id="trigger-message">
                                <label for="trigger-message">message</label>
                                <ul class="pure-tree">
                                    <li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
                                </ul>
                            </li>
                            <li>
                                <input type="checkbox" id="trigger-panel">
                                <label for="trigger-panel">panel</label>
                                <ul class="pure-tree">
                                    <li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
                                </ul>
                            </li>
                            <li>
                                <input type="checkbox" id="trigger-prompt">
                                <label for="trigger-prompt">prompt</label>
                                <ul class="pure-tree">
                                    <li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
                                </ul>
                            </li>
                            <li>
                                <input type="checkbox" id="trigger-sub-header">
                                <label for="trigger-sub-header">sub-header</label>
                                <ul class="pure-tree">
                                    <li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <input type="checkbox" id="trigger-ui">
                        <label for="trigger-ui">ui</label>
                        <ul class="pure-tree">
                            <li>
                                <input type="checkbox" id="trigger-box-color">
                                <label for="trigger-box-color">box-color</label>
                                <ul class="pure-tree">
                                    <li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
                                </ul>
                            </li>
                            <li>
                                <input type="checkbox" id="trigger-button">
                                <label for="trigger-button">button</label>
                                <ul class="pure-tree">
                                    <li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
                                </ul>
                            </li>
                            <li>
                                <input type="checkbox" id="trigger-charts">
                                <label for="trigger-charts">charts</label>
                                <ul class="pure-tree">
                                    <li>
                                        <input type="checkbox" id="trigger-border">
                                        <label for="trigger-border">border</label>
                                        <ul class="pure-tree">
                                            <li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <input type="checkbox" id="trigger-progress">
                                        <label for="trigger-progress">progress</label>
                                        <ul class="pure-tree">
                                            <li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <input type="checkbox" id="trigger-check">
                                <label for="trigger-check">check</label>
                                <ul class="pure-tree">
                                    <li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
                                </ul>
                            </li>
                            <li>
                                <input type="checkbox" id="trigger-dropdown">
                                <label for="trigger-dropdown">dropdown</label>
                                <ul class="pure-tree">
                                    <li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
                                </ul>
                            </li>
                            <li>
                                <input type="checkbox" id="trigger-input">
                                <label for="trigger-input">input</label>
                                <ul class="pure-tree">
                                    <li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
                                </ul>
                            </li>
                            <li>
                                <input type="checkbox" id="trigger-radio">
                                <label for="trigger-radio">radio</label>
                                <ul class="pure-tree">
                                    <li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
                                </ul>
                            </li>
                            <li>
                                <input type="checkbox" id="trigger-rating-stars">
                                <label for="trigger-rating-stars">rating-stars</label>
                                <ul class="pure-tree">
                                    <li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
                                </ul>
                            </li>
                            <li>
                                <input type="checkbox" id="trigger-textarea">
                                <label for="trigger-textarea">textarea</label>
                                <ul class="pure-tree">
                                    <li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
                                </ul>
                            </li>
                            <li>
                                <input type="checkbox" id="trigger-toggle">
                                <label for="trigger-toggle">toggle</label>
                                <ul class="pure-tree">
                                    <li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </body>
</html>
